<template>


    <!--<marquee loop="1">This text will scroll from right to left</marquee>-->

    <a-tabs style="margin-top: 20px;margin-left: 100px">
        <a-tab-pane key="1" style="margin-right: 100px">


            <template #title>

                <icon-fire />
                防火知识安全

            </template>



            <a-collapse :default-active-key="['1', 2]" v-model="dataSource">

                <a-collapse-item header="遇到火灾，我们到底该如何正确逃生?" key="1">



                </a-collapse-item>

               <!-- <a-collapse-item header="日常防火知识" key="2">

                    <a-carousel
                            :style="{ width: '70%', height: '340px',}"
                            :default-current="2"
                            @change="handleChange"
                    >
                        <a-carousel-item v-for="image in images">
                            <img
                                    :src="image"
                                    :style="{width: '100%',}"
                            />
                        </a-carousel-item>
                    </a-carousel>


                </a-collapse-item>
                <a-collapse-item header="防火教育视频" key="3">
                <video width="80%" height="540" controls>
                    <source src="https://multifunctional.oss-cn-shanghai.aliyuncs.com/20240320_232120.mp4" type="video/mp4">
                    <source src="movie.ogg" type="video/ogg">
                    您的浏览器不支持 video 标签。
                </video>
                </a-collapse-item>-->
            </a-collapse>



        </a-tab-pane>
       <!-- <a-tab-pane key="2">
            <template #title>
                <icon-safe />
                防诈骗安全知识
            </template>
            Content of Tab Panel 2
        </a-tab-pane>
        <a-tab-pane key="3">
            <template #title>
                <icon-exclamation-circle />
                毒品知识
            </template>

        </a-tab-pane>-->
    </a-tabs>


</template>

<script setup>
    import {reactive} from 'vue'
    import message from "@arco-design/web-vue/es/message";
    import {ref} from "@vue/reactivity";
    import myAxios from '../plugins/myAxios';
    import {useRoute} from "vue-router";
    import {useRouter} from "vue-router";
    import {onMounted, watchEffect} from "@vue/runtime-core";
    import {getCurrentUser} from "@/services/user";

    const router = useRouter();
    const route = useRoute();


    const dataSource=[
        {
            step: '弄清楚火势',
            content: '通过烟气蔓延方向或楼道应急广播判断起火位置、火势情况，根据火势大小和自己所处环境，及时做出固守待援还是迅速逃生的决定',
            imageUrl: 'https://yjt.hunan.gov.cn/yjt/tszt/aqzs/201912/11004880/images/41ed6abfcc474656bcc78ae3306b7531.jpg'
        },
        {
            step: '切勿乘坐电梯逃生',
            content: '因为火灾发生后，电梯井会成为烟气迅速蔓延扩散的通道，火灾产生的高热会使电梯系统出现异常，一旦停电，电梯容易卡住，将人闷在里面，所以，火场逃生疏散时，千万不能乘坐普通电梯。',
            imageUrl: 'https://yjt.hunan.gov.cn/yjt/tszt/aqzs/201912/11004880/images/01ae2fe25e1c49ba88249c276e7e9b70.jpg'
        },
        {
            step: '疏散过程',
            content: '注意照顾老年人和残疾人。如果带着孩子，千万不能把婴儿放在儿童车里推着跑，而应背着或者抱着孩子进行疏散。如果已经疏散到建筑物外，不要再重新返回。如有情况应报告消防队员，请求其援助救援。',
            imageUrl: 'https://yjt.hunan.gov.cn/yjt/tszt/aqzs/201912/11004880/images/41ed6abfcc474656bcc78ae3306b7531.jpg'
        },
        {
            step: '开门逃生前',
            content: '先用手触摸房门，如果房门变热，则不能轻易打开，否则烟和火就会直接冲入室内。要马上选择一个暂时避险的地方，' +
                '最好是有水源，靠近窗口，用湿床单封堵门缝，延缓烟气蔓延。不要贸然打开门窗，有毒烟气会迅速进入房间，也会造成火势迅速向房间内蔓延。',
            imageUrl: 'https://yjt.hunan.gov.cn/yjt/tszt/aqzs/201912/11004880/images/2410dac70c5a49ec95d854fb9dae03db.jpg'
        },
        {
            step: '紧急情况',
            content: '遇到浓烟时，可利用身边的衣服、毛巾或者其它可利用的东西沾湿捂住口鼻，' +
                '并尽量降低行走姿势，以免烟气进入呼吸道。在逃生途中，如果烟气特别浓而使人感到呼吸困难，可贴近地面爬行。',
            imageUrl: 'https://yjt.hunan.gov.cn/yjt/tszt/aqzs/201912/11004880/images/5564d248850e4e62b755864e83a7e6f7.jpg'
        },
        {
            step: '大火将安全出口封堵',
            content: '可以在阳台或者楼顶打电话求救，或者用醒目的物品引起消防员的注意，以便及时获救。也可用床单、窗帘或者其它绳索从窗户滑下逃生，还可沿着建筑物外的落水管等这些附属设施逃生。被困在二楼无法逃生时，可先向地面扔一些棉被等柔软物品，再用手扒住窗台，自然下滑逃生，不要盲目跳楼，也不要强行穿过浓烟烈火区进行逃生。',
            imageUrl: 'https://yjt.hunan.gov.cn/yjt/tszt/aqzs/201912/11004880/images/116c234121534404b8c4cabef36a0ee6.jpg'
        }
    ]


    const current = ref(1);

    const onPrev = () => {
        current.value = Math.max(1, current.value-1);
    };

    const onNext = () => {
        current.value = Math.min(dataSource.length, current.value + 1);
    };


    const images = [
        'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp',
        'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp',
        'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp',
    ];
    const handleChange=(value)=>{

    }
    const setCurrent=(num)=> {
        current.value = num
    }

</script>

<style scoped>

   /* .frame-bg {
        max-width: 780px;
        padding: 40px;
        background: var(--color-fill-2);
    }*/

    .frame-body {
        display: flex;
        background: var(--color-bg-2);
    }

    .frame-aside {
        padding: 24px;
        height: 272px;
        border-right: 1px solid var(--color-border);
    }

    .frame-main {
        width: 100%;
    }

    .main-content {
        text-align: center;
        line-height: 100px;
    }

    .main-bottom {
        display: flex;
        justify-content: center;

        button {
            margin: 0 20px;
        }

    }
</style>
